import { reactive, ref } from 'vue'
// 校验函数
// 校验用户名
export const validateUsername = (rule, value, callback) => {
    let reg = /^[a-zA-Z0-9-_]{3,16}$/
    if(reg.test(value)){
     callback()//验证通过
    }else{
     callback(new Error("用户名是字母数字下划线或短横线,3~16位"))//验证不通过
    }
 }
 // 校验密码
 export const validatePassword = (rule, value, callback) => {
     if(value){
         callback()
     }else{
         callback(new Error("密码不能为空"))
     }
 }
 // 校验验证码
 export const validateCaptcha = (rule, value, callback) => {
     if(value.length<5){
         callback("验证码不能小于5位")
     }else{
         callback()
     }
 }
    //  校验手机号
    export const validatePhone = ( rule,value, callback)=>{
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if(reg.test(value)){
            callback()//验证通过
           }else{
            callback(new Error("请输入正确的手机号"))//验证不通过
           }

    }
    // 校验手机验证码
    export const validatePhoneCaptcha = (rule,value,callback)=>{
        if(value.length<5){
            callback("验证码不能小于5位")
        }else{
            callback()
        }
    }
 // 校验规则
 export const commonRules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    captcha: [{ validator: validateCaptcha, trigger: 'blur' }],
})
 export const smsRules = reactive({
    phone: [{ validator: validatePhone, trigger: 'blur' }],
    phoneCaptcha: [{ validator: validatePhoneCaptcha, trigger: 'blur' }],
})


// 表单提交的时候
/**
 * 
 * @param {Object} formEl 表单的引用对象
 * @param {Function} sucessCallback 表单校验通过的回调函数
 * @param {Function} faildCallback 表单校验失败的回调函数
 */
// 表单提交
export const useSubmitForm = (sucessCallback,faildCallback)=>(formEl) => { 
    console.log(formEl);
    if (!formEl) return
    // 组件提供的校验方法
    formEl.validate((valid) => {
        // 如果所有的表单校验通过，valid是true，不然就是false
        if (valid) {
            if(sucessCallback){
                sucessCallback()
            }
            // console.log('submit!') 
        } else {
            // console.log('error submit!')
            if(faildCallback){
                faildCallback(false)
            }
            return false
        }
    })
}
